<template>
  <div id="app">
    <div class="content">
      <transition name="fade" mode="out-in">
        <!-- 注册页 -->
        <register-com
          v-if="showRegister"
          @user-register="comFunRegister"
        ></register-com>
        <!-- 第一页登录 -->
        <login-com v-if="showLogin" @user-login="comFunUserLogin"></login-com>
        <!-- 第二页聊天对象选择 -->
        <select-chat-com
          v-if="showChatList"
          :chatlist="chatList"
          :loginuser="loginUser"
          :unreadlist="unReadList"
          @chat-user="comFunchatUser"
        >
        </select-chat-com>
        <!-- 第三页聊天 -->
        <chat-com
          :chatuser="chatUser"
          :loginuser="loginUser"
          v-if="showChatMain"
          :unreadlist="unReadList"
          @back-select-chat="changeView(1)"
        ></chat-com>
      </transition>
    </div>
  </div>
</template>

<script>
import LoginCom from './components/LoginCom'
import RegisterCom from './components/RegisterCom'
import SelectChatCom from './components/SelectChatCom'
import ChatCom from './components/ChatCom.vue'

import axios from 'axios'
import socket from './socket'

export default {
  name: 'App',
  components: {
    LoginCom,
    RegisterCom,
    SelectChatCom,
    ChatCom,
  },
  data() {
    return {
      // 用户列表
      userList: [],
      // 群组列表
      groupList: [],
      // 聊天用户列表
      chatList: [],
      // 未读消息列表
      unReadList: [],
      // 当前登录户
      loginUser: {},
      // 当前聊天户
      chatUser: {},
      showRegister: false,
      showLogin: true,
      showChatList: false,
      showChatMain: false,
    }
  },

  methods: {
    async comFunUserLogin(e) {
      console.log(e, 'comFunUserLogin')
      socket.emit('loginToServer', e.formData)
    },
    // 用户注册
    async comFunRegister(e) {
      const { data } = await this.$http.post('/user', e.formData)

      if (data.code === 0) {
        alert(data.msg)
        this.changeView(0)
      } else {
        alert(data.msg)
      }
    },
    comFunchatUser(e) {
      this.changeView(2)
      this.chatUser = this.chatList[e.index]
    },
    // 切换界面显示，
    changeView(index) {
      this.showRegister = false
      this.showLogin = false
      this.showChatList = false
      this.showChatMain = false

      // 0 登录页，1 用户列表，2 聊天页，3 注册页
      if (index === 0) {
        this.showLogin = true
      } else if (index === 1) {
        this.showChatList = true
      } else if (index === 2) {
        this.showChatMain = true
      } else if (index === 3) {
        this.showRegister = true
      }
    },

    // 获取用户列表
    async getUserlist() {
      const { data } = await this.$http.get('/userlist')
      console.log(data, 'getUserlist')
      data.forEach((item) => {
        item.avatarurl = this.$commonInfo.baseUrl + item.avatarurl
      })
      this.userList = data
      let tempChatList = this.userList.filter((item) => {
        return item.username !== this.loginUser.username
      })

      this.chatList = tempChatList
    },

    // 全部的 socket 方法
    allSocketApi() {
      // 试验过，一起写在一个方法里，比如写在getSocketInfo 里不能随时监听执行，所以这里一并写在mouted里
      socket.on('connection', function(data) {
        console.log('与服务器建立起 socket 链接')
        console.log(data)
      })

      // 监听登录
      socket.on('loginToWeb', (data) => {
        // 监听是否登录成功

        if (data.state === 'ok') {
          data.loginUser.avatarurl =
            this.$commonInfo.baseUrl + data.loginUser.avatarurl
          this.loginUser = data.loginUser
          this.getUserlist()
          this.changeView(1)
        }
      })

      // 监听登出
      socket.on('logout', (data) => {
        this.changeView(0)
        console.log(data)
      })

      // 监听未读消息
      socket.on('unReadMsg', (data) => {
        const tempMsgArr = []
        data.forEach((item) => {
          // 未读用户列表
          this.unReadList.push(item)
        })
      })
    },
  },

  mounted() {
    this.allSocketApi()
  },
}
</script>

<style>
html,
body,
ul,
li {
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  color: #666666;
  font-weight: 600;
}
button {
  font-weight: 600;
}
input {
  font-weight: 600;
  color: #666666;
}
* {
  box-sizing: border-box;
}

.fade-enter-active {
  animation: bounce-in 0.3s;
}
.fade-leave-active {
  animation: bounce-in 0.3s reverse;
}
@keyframes bounce-in {
  0% {
    /* transform: scale(0); */
    opacity: 0;
  }
  /* 50% {
    transform: scale(1.5);
  } */
  100% {
    /* transform: scale(1); */
    opacity: 1;
  }
}
</style>
